<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册账号 - 局域网通讯系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="icon" type="image/png" href="/Image/logo.png">
    <style>
    body, .login-bg {
        min-height: 100vh;
        background: linear-gradient(-45deg, #e0e7ff, #f1f5f9, #c7d2fe, #f0fdfa);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
    }
    @keyframes gradientBG {
        0% {background-position: 0% 50%;}
        50% {background-position: 100% 50%;}
        100% {background-position: 0% 50%;}
    }
    </style>
</head>
<body>
<canvas id="bg-canvas" style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;"></canvas>
    <div class="login-bg">
        <div class="container d-flex justify-content-center align-items-center min-vh-100">
            <div class="login-card shadow-lg p-4 rounded-4 bg-white">
                <div class="text-center mb-4">
                    <img src="/Image/logo.png" alt="Logo" class="mb-2" style="height:48px;">
                    <h2 class="fw-bold mb-1">注册账号</h2>
                    <div class="text-secondary small">LAN Communication System</div>
                </div>
                <form action="/register" method="post" autocomplete="off">
                    <div th:if="${msg}" class="alert alert-danger py-2 mb-3" th:text="${msg}"></div>
                    <div th:if="${errorMsg}" class="alert alert-danger py-2 mb-3" th:text="${errorMsg}"></div>
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-user"></i></span>
                        <input type="text" name="username" id="regUsername" class="form-control ps-5" placeholder="用户名" required autofocus th:value="${username}">
                    </div>
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-id-card"></i></span>
                        <input type="text" name="first_name" id="regFirstName" class="form-control ps-5" placeholder="姓" required th:value="${first_name}">
                    </div>
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-id-card"></i></span>
                        <input type="text" name="last_name" id="regLastName" class="form-control ps-5" placeholder="名" required th:value="${last_name}">
                    </div>
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-lock"></i></span>
                        <input type="password" name="password" id="regPassword" class="form-control ps-5" placeholder="密码" required>
                        <span class="toggle-password" style="position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;"><i class="fa fa-eye-slash"></i></span>
                    </div>
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-lock"></i></span>
                        <input type="password" name="confirmPassword" id="regConfirmPassword" class="form-control ps-5" placeholder="确认密码" required>
                        <span class="toggle-password" style="position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;"><i class="fa fa-eye-slash"></i></span>
                    </div>
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-envelope"></i></span>
                        <input type="email" name="email" id="regEmail" class="form-control ps-5" placeholder="邮箱" required th:value="${email}">
                        <button type="button" class="btn btn-outline-secondary position-absolute end-0 top-0 mt-1 me-2" id="getEmailCodeBtn" style="z-index:2;">获取验证码</button>
                    </div>
                    <div class="mb-3 position-relative">
                        <span class="input-icon"><i class="fa fa-key"></i></span>
                        <input type="text" name="emailCode" id="regEmailCode" class="form-control ps-5" placeholder="邮箱验证码" required>
                    </div>
                    <button class="btn btn-primary w-100 py-2 fw-bold" type="submit">注册</button>
                    <div class="login-links text-center mt-3">
                        <a href="/login">已有账号？去登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./js/jquery-1.12.3.min.js"></script>
    <script>
      $(function() {
        var emailCodeTimer = null;
        var emailCodeCountdown = 60;
        $('#getEmailCodeBtn').click(function() {
          var email = $('#regEmail').val().trim();
          if (!email) {
            alert('请输入邮箱');
            $('#regEmail').focus();
            return;
          }
          var btn = $(this);
          if (btn.prop('disabled')) return;
          btn.prop('disabled', true).text('发送中...');
          $.post('/sendEmailCode', {email: email}, function(res) {
            if (res === 'success') {
              var count = emailCodeCountdown;
              btn.text(count + 's后重试');
              emailCodeTimer = setInterval(function() {
                count--;
                if (count <= 0) {
                  clearInterval(emailCodeTimer);
                  btn.prop('disabled', false).text('获取验证码');
                } else {
                  btn.text(count + 's后重试');
                }
              }, 1000);
              alert('验证码已发送到邮箱，请注意查收');
            } else {
              btn.prop('disabled', false).text('获取验证码');
              alert(res);
            }
          });
        });
        $('form').on('submit', function(e) {
          var username = $('#regUsername').val().trim();
          var password = $('#regPassword').val().trim();
          var confirmPassword = $('#regConfirmPassword').val().trim();
          $('.alert-danger').remove();
          if (!username) {
            $(this).prepend('<div class="alert alert-danger py-2 mb-3">用户名不能为空</div>');
            $('#regUsername').focus();
            e.preventDefault();
            return false;
          }
          if (!password) {
            $(this).prepend('<div class="alert alert-danger py-2 mb-3">密码不能为空</div>');
            $('#regPassword').focus();
            e.preventDefault();
            return false;
          }
          if (password.length < 6) {
            $(this).prepend('<div class="alert alert-danger py-2 mb-3">密码不能少于6位</div>');
            $('#regPassword').focus();
            e.preventDefault();
            return false;
          }
          if (password !== confirmPassword) {
            $(this).prepend('<div class="alert alert-danger py-2 mb-3">两次密码输入不一致</div>');
            $('#regConfirmPassword').focus();
            e.preventDefault();
            return false;
          }
        });
        // 密码可见切换
        $(document).on('click', '.toggle-password', function() {
          var input = $(this).siblings('input');
          var icon = $(this).find('i');
          if (input.attr('type') === 'password') {
            input.attr('type', 'text');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
          } else {
            input.attr('type', 'password');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
          }
        });
      });
    </script>
    <script>
    // Canvas 动态背景动画（彩色粒子漂浮）
    (function() {
      var canvas = document.getElementById('bg-canvas');
      if (!canvas) return;
      var ctx = canvas.getContext('2d');
      var w = window.innerWidth, h = window.innerHeight;
      canvas.width = w;
      canvas.height = h;
      var particles = [];
      var colors = ['#a5b4fc','#f0fdfa','#c7d2fe','#f1f5f9','#e0e7ff'];
      for (var i = 0; i < 60; i++) {
        particles.push({
          x: Math.random() * w,
          y: Math.random() * h,
          r: 16 + Math.random() * 16,
          dx: (Math.random() - 0.5) * 0.7,
          dy: (Math.random() - 0.5) * 0.7,
          color: colors[Math.floor(Math.random()*colors.length)],
          alpha: 0.2 + Math.random() * 0.3
        });
      }
      function draw() {
        ctx.clearRect(0,0,w,h);
        for (var i = 0; i < particles.length; i++) {
          var p = particles[i];
          ctx.globalAlpha = p.alpha;
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.r, 0, 2*Math.PI);
          ctx.fillStyle = p.color;
          ctx.fill();
          p.x += p.dx;
          p.y += p.dy;
          if (p.x < -p.r) p.x = w + p.r;
          if (p.x > w + p.r) p.x = -p.r;
          if (p.y < -p.r) p.y = h + p.r;
          if (p.y > h + p.r) p.y = -p.r;
        }
        ctx.globalAlpha = 1;
        requestAnimationFrame(draw);
      }
      draw();
      window.addEventListener('resize', function() {
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
      });
    })();
    </script>
</body>
</html> 